<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="asserts/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<!--		<link rel="stylesheet" href="asserts/font-awesome-4.7.0/css/font-awesome.min.css" />
-->		<link rel="stylesheet" href="css/main.css">
 <style>
            .panel-group{max-height:770px;overflow: auto;}
            .leftMenu{margin:10px;margin-top:5px;}
            .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
            .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
            .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
            .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
        </style>
	</head>
	<body>
		<!-- header -->
		<div class="header navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">
						易书博客后台管理系统
					</a>
				</div>
				
				<ul class="nav navbar-nav navbar-right">
					<li>
						<a href="javascript:logout()"><span class="glyphicon glyphicon-log-out">&nbsp;</span>安全退出</a>
					</li>
				</ul>
				
				<form class="navbar-form navbar-right" role="search">
				  <div class="form-group">
					<input type="text" class="form-control" placeholder="关键字">
				  </div>
				  <button type="submit" class="btn btn-default">
					  <span class="glyphicon glyphicon-search"></span>
				  </button>
				</form>		
								
			</div>
		</div>
		<!-- header end -->
		
		<div class="body">
			<!-- 侧边栏 -->
			<div class="left">
				<!-- 用户信息 -->
				<div class="user-info">
					<div class="info-icon">
						<img src="img/headicon/p1.jpg" width="80px" height="80px" class="img-circle" alt="">
					</div>
					<div class="info-name">MRChai</div> 
				</div>
				<!-- 菜单 -->
				<!--<div class="list-group text-center">
					<a href="main.html" class="list-group-item active"><i class="fa fa-dashboard"></i> 仪表盘</a>
					<a href="banner.html" class="list-group-item"><i class="fa fa-file-image-o"></i> 轮播管理</a>
					<a href="blog.html" class="list-group-item"><i class="fa fa-file-text-o"></i> 博客管理</a>
					<a href="category.html" class="list-group-item"><i class="fa fa-bars"></i> 类别管理</a>
					<a href="tag.html" class="list-group-item"><i class="fa fa-tags"></i> 标签管理</a>
					<a href="comment.html" class="list-group-item"><i class="fa fa-comment"></i> 留言管理</a>
					<a href="link.html" class="list-group-item"><i class="fa fa-chain"></i> 友情链接</a>
					<a href="ad.html" class="list-group-item"><i class="fa fa-rmb"></i> 广告管理</a>
					<a href="settings.html" class="list-group-item"><i class="fa fa-gear"></i> 个人设置</a>
				</div>-->
				
				 <div class="panel-group list-group text-center" role="tablist">
                    <div class="panel panel-primary leftMenu">
                        <!-- 利用data-target指定要折叠的分组列表 -->
                        <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
                            <h4 class="panel-title">
                                分组1
                                <span class="glyphicon glyphicon-chevron-up right"></span>
                            </h4>
                        </div>
                        <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
                        <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
                            <ul class="list-group">
                              <li class="list-group-item">
                                <!-- 利用data-target指定URL -->
                                <button class="menu-item-left" data-target="test2.html">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                                </button>
                              </li>
                           
                            
                            </ul>
                        </div>
                    </div><!--panel end-->
                    <div class="panel panel-primary leftMenu">
                        <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
                            <h4 class="panel-title">
                                分组2
                                <span class="glyphicon glyphicon-chevron-down right"></span>
                            </h4>
                        </div>
                        <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
                            <ul class="list-group">
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                                </button>
                              </li>
                              <li class="list-group-item">
                                <button class="menu-item-left">
                                    <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                                </button>
                              </li>
                            </ul>
                        </div>
                    </div>  
                </div>
				
				
				
			</div>
			
			<!-- 内容展示区 -->
			<div class="right">
				<ol class="breadcrumb">
					<li><i class="fa fa-dashboard"></i> 仪表盘</li>
				</ol>
				<div class="container-fluid">
					<blockquote>
						信息总览
					</blockquote>
					<!-- 统计信息 -->
					<div class="count">
						<div class="count-item">
							<span class="fa fa-user fa-2x"></span><br>
							管理员<br>
							<span class="number">2人</span>
						</div>
						<div class="count-item">
							<span class="fa fa-file fa-2x"></span><br>
							文章<br>
							<span class="number">10篇</span>
						</div>
						<div class="count-item">
							<span class="fa fa-comment  fa-2x"></span><br>
							留言<br>
							<span class="number">180条</span>
						</div>
						<div class="count-item">
							<span class="fa fa-list fa-2x"></span><br>
							类别<br>
							<span class="number">10个</span>
						</div>
						<div class="count-item">
							<span class="fa fa-comment fa-2x"></span><br>
							评论<br>
							<span class="number">36541条</span>
						</div>
						<div class="count-item">
							<span class="fa fa-tags fa-2x"></span><br>
							标签<br>
							<span class="number">78个</span>
						</div>
						<div class="count-item">
							<span class="fa fa-rmb fa-2x"></span><br>
							广告<br>
							<span class="number">10条</span>
						</div>
						<div class="count-item">
							<span class="fa fa-eye fa-2x"></span><br>
							访问量<br>
							<span class="number">238653次</span>
						</div>
					</div><!-- 统计信息end -->
					<blockquote>
						登录信息
					</blockquote>
					<!-- 系统信息 -->
					<div class="stat">
						<table class="table table-striped">
							<tr>
								<td>登录人:</td>
								<td>MRchai</td>
								<td>登录次数:</td>
								<td>22</td>
							</tr>
							<tr>
								<td>上次登录时间:</td>
								<td>2019-01-01 11:22:13</td>
								<td>本次登录时间:</td>
								<td>2019-01-02 15:33:14</td>
							</tr>
							<tr>
								<td>上次登录IP:</td>
								<td>10:22:189:119</td>
								<td>本次登录IP:</td>
								<td>26:122:150:11</td>
							</tr>
						</table>
					</div><!-- 系统信息end -->
				</div>
			</div>
		</div>
		
		
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="asserts/layer/layer.js"></script>
		<script src="js/comm.js"></script>
		
       <!-- Include all compiled plugins (below), or include individual files as needed -->
       	<script type="text/javascript" src="asserts/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
      <script>
        $(function(){
            $(".panel-heading").click(function(e){
                /*切换折叠指示图标*/
                $(this).find("span").toggleClass("glyphicon-chevron-down");
                $(this).find("span").toggleClass("glyphicon-chevron-up");
            });
        });
        </script>
        
        
	</body>
</html>
